<template>
  <view class="logBox">
    <view class="logTab">
      <view class="logTab-title">
        <wd-icon name="close" size="19px" color="#fff" style="margin: 15rpx" @click="tzHome" />
        <text @click="LoginValue.jump">注册</text>
      </view>
      <h2>{{ LoginValue.tab ? "手机号验证码登录" : "密码登录" }}</h2>
    </view>

    <view class="logContent">
      <Phone v-if="LoginValue.tab" />
      <Password v-else />
    </view>

    <text style="margin-top: 70rpx; font-size: 28rpx; color: #d1d1d1">微信登录</text>
    <img
      src="@/static/login/wx.png"
      alt=""
      style="width: 60rpx; height: 60rpx; margin-top: 25rpx"
    />
  </view>
</template>

<script lang="ts" setup>
import Phone from "@/components/login/Phone.vue";
import Password from "@/components/login/Password.vue";
import { LoginPinia } from "@/store/modules/Login";
const LoginValue = LoginPinia();
function tzHome() {
  uni.switchTab({ url: "/pages/home/index" });
}
</script>

<style lang="scss" scoped>
.logBox {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100vh;
  .logTab {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 350rpx;
    padding: 0 100rpx;
    background-color: #00c8aa;
    .logTab-title {
      display: flex;
      justify-content: space-between;
      width: 100%;
      text {
        margin: 15rpx;
        color: #ffffff;
      }
    }
    h2 {
      margin-top: 60rpx;
      color: #ffffff;
    }
  }

  .logContent {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    width: 90%;
    height: 500rpx;
    padding: 25rpx 0;
    margin-top: -100rpx;
    background-color: #fff;
    border-radius: 12rpx;
    box-shadow: 0 0 10rpx 0 rgba(0, 0, 0, 0.3);
    .custom-shadow {
      width: 90%;
    }
  }
}
</style>
